import React, { Component } from "react";
import "./Perform.scss";
import todayImg from "../../assets/img/today.jpg";
import { Carousel } from "antd-mobile";
import axios from "axios";

export default class Perform extends Component {
  constructor(props) {
    super(props);
    this.handleWaterfall = React.createRef()
    // console.log(this);
  }

  state = {
    imgHeight: 65,
    dataImg: [
      "https://img.meituan.net/kylisean/8aa50c23483501d4fd5f4199599a3d00255391.jpg",
      "https://img.meituan.net/kylisean/0adc81573213ce0dc07a06913fa61f4b69887.jpg",
      "https://img.meituan.net/kylisean/0adc81573213ce0dc07a06913fa61f4b69887.jpg",
    ],
    todayData: [],
    artistList: [],
    whatLook: [],
    waterfallLeft: [],
    waterfallRight: [],
    pageSize: 20,//默认返回的条数
    pageNo: 1,//默认的页数
    totalHits: 20,//默认的总条数
    // containerWidth:100%,

  };


  // 瀑布流的默认配置
  getResponsiveProps() {
    return {
      itemMargin: 10,
      // containerWidth:100,
      containerWidth: this.state.containerWidth || document.body.clientWidth,
      itemClassName: 'item',
      gridWidth: 100,
      transitionDuration: '.5'
    }
  }

  componentDidMount() {

    // this.getWaterfall()
    this.handleWaterfall.current.addEventListener('scroll', this.handleScroll)
    axios
      .get(
        "https://show.maoyan.com/maoyansh/myshow/ajax/performances/rob/main?uuid=khtn8nolc0iul8a4yswg1i2y4atgne2hhch9j88usybcww02opnouvzaowo2nfwi&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0"
      )
      .then((res) => {
        // console.log(res.data.data);
        let result = res.data.data;
        this.setState({
          todayData: result,
        });
      })
      .catch((error) => {
        console.log(error);
      });
    axios
      .get(
        "https://show.maoyan.com/maoyansh/myshow/ajax/celebrityBasicList/query?uuid=khtn8nolc0iul8a4yswg1i2y4atgne2hhch9j88usybcww02opnouvzaowo2nfwi&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0"
      )
      .then((res) => {
        // console.log(res.data.data);
        let result = res.data.data;

        this.setState({
          artistList: result,
        });
      })
      .catch((error) => {
        console.log(error);
      });

    axios
      .get(
        "https://show.maoyan.com/maoyansh/myshow/ajax/rankList?sellChannel=13&cityId=1&lng=0&lat=0"
      )
      .then((res) => {
        // console.log(res.data.data);
        let result = res.data.data;

        this.setState({
          whatLook: result,
        });
      })
      .catch((error) => {
        console.log(error);
      });

    // 获取瀑布流右边数据
    // this.getWaterfallRight()
    // 获取瀑布流左边数据
    this.getWaterfallLeft()
  }

  // 获取瀑布流右边数据
  // getWaterfallRight = () => {
  //   if (this.state.pageNo > Math.ceil(this.state.totalHits / this.state.pageSize)) {
  //     console.log('没数据了')
  //     return false
  //   // } else {
  //   //   console.log('继续');
  //   //   console.log(this.state.pageNo);
  //     axios
  //       .get(
  //         `https://show.maoyan.com/maoyansh/myshow/ajax/performances/0;st=4;p=${this.state.pageNo};s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg`
  //       )
  //       .then((res) => {
  //         // console.log(res.data);

  //         this.setState({
  //           waterfallRight: [...this.state.waterfallRight, ...res.data.data],
  //           pageNo:this.state.pageNo + 1,
  //           totalHits: res.data.paging.totalHits,
  //           pageSize: res.data.paging.pageSize,
  //         });
  //       })
  //       .catch((error) => {
  //         console.log(error);
  //       });
  //   }
  // }

  // 获取瀑布流左边数据
  getWaterfallLeft = () => {
    let index =this.state.pageNo
    if (this.state.pageNo > Math.ceil(this.state.totalHits / this.state.pageSize)) {
      console.log('没数据了')
      return false
    } else {
      // console.log('继续');
      // console.log(this.state.pageNo);
      axios
        .get(
          `https://show.maoyan.com/maoyansh/myshow/ajax/performances/0;st=4;p=${index};s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg`
        )
        .then((res) => {
          // console.log(res.data);

          this.setState({
            waterfallRight: [...this.state.waterfallRight, ...res.data.data],
            pageNo:index + 1,
            totalHits: res.data.paging.totalHits,
            pageSize: res.data.paging.pageSize,
          });
        })
        .catch((error) => {
          console.log(error);
        });
    }
    if (this.state.pageNo > Math.ceil(this.state.totalHits / this.state.pageSize)) {
      // console.log('没数据了')
      return false
    } else {
      // console.log('继续');
      // console.log(this.state.pageNo + '第二次');
      axios
        .get(
          `https://show.maoyan.com/maoyansh/myshow/ajax/performances/0;st=4;p=${index + 1};s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg`
        )
        .then((res) => {
          // console.log(res.data);

          this.setState({
            waterfallLeft: [...this.state.waterfallLeft, ...res.data.data],
           
          });
        })
        .catch((error) => {
          console.log(error);
        });
    }

    
  }


  // 跳转到搜索页
  goToSerch = () => {
    this.props.history.push("/serch");
  };
  // 跳转到列表页
  goToList = () => {
    this.props.history.push("/list");
  };
  // 跳转到详情页
  goToDetail = (index) => {

    this.props.history.push("/detail/" + index);
  };

  // 跳转到明星页
  goToArtist = (v) => {
    // console.log(v.id);
    let { id, celebrityId } = v
    // this.props.history.push({pathname:'/artist',query:{id:v.id,celebrityId:v.celebrityId}})
    this.props.history.push('/artist/' + id + '/' + celebrityId)
  }

  // 瀑布流事件
  //滚动事件
  handleScroll = () => {
    // console.log(111)
    let node = this.handleWaterfall.current
    // console.log(node);
    //视口高度
    let clientHeight = node.clientHeight
    // console.log(clientHeight);

    // 列表高度
    let scrollHeight = node.scrollHeight
    // console.log(scrollHeight);

    // 已经滚动的高度
    let scrollTop = node.scrollTop
    // console.log(scrollTop);

    if (scrollHeight - clientHeight - scrollTop < 0.0055) {
      // console.log('触底了');
      // this.getWaterfall()
   
      // 获取瀑布流左边数据
      this.getWaterfallLeft()
    }

  }

  // 请求瀑布流数据
  getWaterfall = () => {

    if (this.state.pageNo > Math.ceil(this.state.totalHits / this.state.pageSize)) {
      console.log('没数据了')
      return false
    } else {
      console.log('继续');
      console.log(this.state.pageNo);
      axios
        .get(
          `https://show.maoyan.com/maoyansh/myshow/ajax/performances/0;st=4;p=${this.state.pageNo};s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg`
        )
        .then((res) => {
          // console.log(res.data);

          this.setState({
            waterfallRight: [...this.state.waterfallRight, ...res.data.data],
            pageNo:this.state.pageNo + 1,
            totalHits: res.data.paging.totalHits,
            pageSize: res.data.paging.pageSize,
          });
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }


  componentWillUnmount() {

    // 注销监听事件
    this.handleWaterfall.current.removeEventListener('scroll', this.handleScroll)
  }


  render() {
    // console.log(this.state.whatLook);
    // console.log(this.state.artistList[0].celebrityName);
    return (
      <div className="perform-nav" ref={this.handleWaterfall}>
        {/* 导航区域开始 */}
        <div className="search-Bar">
          <div className="city-view">
            <i className="iconfont icon-weizhi"></i>
            <span>城市</span>
            <i className="iconfont icon-jiantou9"></i>
          </div>
          <div className="serch-input" onClick={this.goToSerch}>
            <i className="iconfont icon-search "></i>
            <span className="serch-input-text">找明星.演出.场馆</span>
          </div>
        </div>
        {/* 导航区域结束*/}

        {/* 分类开始 */}
        <div className="categories">
          <div className="categories-items" onClick={this.goToList}>
            <img
              src="https://img.meituan.net/kylisean/b132e8d30be554486b8c909c7d16f7c15282.png"
              alt=""
            />
            <span>演唱会</span>
          </div>
          <div className="categories-items" onClick={this.goToList}>
            <img
              src="https://img.meituan.net/kylisean/5cc92a5a6bb19618f7d2b31433a2a2f24956.png"
              alt=""
            />
            <span>话剧歌剧</span>
          </div>
          <div className="categories-items" onClick={this.goToList}>
            <img
              src="https://img.meituan.net/kylisean/2b3d5971c31e8a39e181bd07f3c42d824737.png"
              alt=""
            />
            <span>休闲展览</span>
          </div>
          <div className="categories-items" onClick={this.goToList}>
            <img
              src="https://img.meituan.net/kylisean/8d6764a0cee35332f44976f84b188c444767.png"
              alt=""
            />
            <span>戏曲相声</span>
          </div>
          <div className="categories-items" onClick={this.goToList}>
            <img
              src="https://img.meituan.net/kylisean/cce8a904f6489abeff04f9d9555dd77f4052.png"
              alt=""
            />
            <span>亲子/艺术</span>
          </div>
        </div>
        {/* 分类结束 */}

        {/* 内容区域开始 */}
        <div className="comtent">
          {/* 今日必抢开始 */}
          <div className="today-title">
            <img src={todayImg} alt="" />
            <div className="title-right">
              更多必抢
              {/* <svg className="icon" aria-hidden="true">
               <use href="#icon-youjiantou-01"></use>
               </svg> */}
              <i className="iconfont icon-youjiantou-01"></i>
            </div>
          </div>

          <div className="today-lock">
            {this.state.todayData.map((v) => {
              return (
                <div
                  className="grid-three"
                  key={v.performanceId + Math.random()}
                  onClick={this.goToDetail.bind(this, v.performanceId)}
                >
                  <div className="grid-item">
                    <img src={v.posterUrl} alt="" />
                  </div>
                  <span className="tag-wrapper">
                    <img
                      src="https://p0.meituan.net/scarlett/fe4f7ed065dfa4f6832187ae6aca956b954.png"
                      alt=""
                    />
                    火热抢购中
                  </span>
                  <div className="title">{v.name}</div>
                </div>
              );
            })}
          </div>
          {/* 今日必抢结束 */}

          {/* 轮播图开始 */}
          <div className="swiper">
            <Carousel autoplay={true} infinite>
              {this.state.dataImg.map((val) => (
                <div
                  key={val + Math.random()}

                  style={{
                    display: "inline-block",
                    width: "100%",
                    height: this.state.imgHeight,
                  }}
                >
                  <img
                    src={val}
                    alt=""
                    style={{ width: "100%", verticalAlign: "top" }}
                  />
                </div>
              ))}
            </Carousel>
          </div>

          {/* 轮播图结束 */}

          {/* 大咖新动态开始 */}
          <div className="title-wrapper">
            <p className="title">大咖新动态</p>
          </div>

          <div className="artist-news">
            <div className="artist-list" >
              {this.state.artistList.map((v) => {
                return (
                  <div className="list-item" key={v.id + Math.random()}  onClick={this.goToArtist.bind(this, v)}>
                    <div className="content-wrapper">
                      <div className="artistImg">
                        <img src={v.headUrl} alt="" />
                      </div>

                      <div className="celebrityName">{v.celebrityName}</div>
                      <span className="celebrityNew"> {v.recommendTag}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          {/* 大咖新动态结束 */}

          {/* 什么值得看开始 */}
          <div className="title-wrapper">
            <p className="title">什么值得看</p>
          </div>

          <div className="what-look">
            <div className="look-items">
              {this.state.whatLook.map((v) => {
                return (
                  <div className="items" key={v.rankId}>
                    <div className="one-line  title">{v.title}</div>
                    <div className="one-line  subtitle">{v.shortTitle}</div>
                    <div className="img-wrapper">
                      <img src={v.coverUrl} alt="" />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          {/* 什么值得看结束 */}

          {/* 为你推荐开始 */}
          <div className="title-wrapper">
            <p className="title">为你推荐</p>
          </div>

          <div className="content-bg" >
            {/* <AutoResponsive ref="container" {...this.getResponsiveProps()}>
              {
                this.state.waterfallRight.map(v => {
                  return (
                    <div className="item" key={v.performanceId + Math.random()} onClick={this.goToDetail.bind(this, v.performanceId)}>
                      <div className="poseter-wrapper">
                        <img src={v.posterUrl} alt="" />
                      </div>
                    </div>
                  )
                })
              } */}
            {/* </AutoResponsive> */}

            <div className="left">
              {
                this.state.waterfallLeft.map(v => {
                  return (
                    <div className="recommend-item-wrapper" key={v.performanceId+ Math.random()} onClick={this.goToDetail.bind(this, v.performanceId)}>
                      <div className="poseter-wrapper">
                        <img src={v.posterUrl} alt="" />
                      </div>
                      <div className="content-wrapper">
                        <div className="title">
                          <span>[<b>{v.cityName}</b>]</span>
                          <span>{v.name}</span>
                        </div>
                        <div className="time">{v.showTimeRange}</div>
                        <div className="price">
                          ￥{v.minTicketOrSellPrice}起
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>

            <div className="left right">
              {
                this.state.waterfallRight.map(v => {
                  return (
                    <div className="recommend-item-wrapper" key={v.performanceId+ Math.random()} 
                    onClick={this.goToDetail.bind(this, v.performanceId)}>
                      <div className="poseter-wrapper">
                        <img src={v.posterUrl} alt="" />
                      </div>
                      <div className="content-wrapper">
                        <div className="title">
                          <span>[<b>{v.cityName}</b>]</span>
                          <span>{v.name}</span>
                        </div>
                        <div className="time">{v.showTimeRange}</div>
                        <div className="price">
                          ￥{v.minTicketOrSellPrice}起
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>


          </div>


          {/* 为你推荐结束 */}
        </div>
        {/* 内容区域结束 */}
      </div>
    );
  }
}
